<template>
	<view class="content">
		<view class="loginContainer">
			<text class="title">登录</text>
			<input class="input" type="text" placeholder="请输入用户名" v-model="loginForm.username" />
			<input class="input" type="password" placeholder="请输入密码" v-model="loginForm.password" />
			<button class="login-btn" type="primary" @click="handleLogin">登录</button>
			<view class="link">
				<text class="tips">没有账号？</text>
				<navigator url="/pages/register/register" open-type="reLaunch" class="login-nav">去注册</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					username: "",
					password: ""
				}
			}
		},
		methods: {
			handleLogin() {
				if (!this.loginForm.username || !this.loginForm.password) {
					uni.showToast({
						title: '请输入完整信息',
						icon: 'none'
					})
					return
				}
				// if (this.loginForm.username === 'yyx' && this.loginForm.password === '123456') {
				if (this.loginForm.username) {
					console.log('存储的：',this.loginForm.username);
					uni.showLoading({
						title: '登录中...'
					})
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							title: '登陆成功'
						})
						uni.setStorage({
							key: "username",
							data: this.loginForm.username,
							success() {
								console.log("存储username 成功回调");
								// 回调里面（异步）的this和页面的不是一个this
								// console.log('存储：'+this.loginForm.username);
							},
							fail() {
								console.error("存储username 存储失败");
							},
						})
						uni.switchTab({
							url: '/pages/UserInfo/UserInfo'
						})
					}, 1000)
				} else {
					uni.showToast({
						title: '密码错误，请重新输入'
					})
					this.loginForm.password = ''
				}
			}
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		background-color: whitesmoke;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loginContainer {
		height: 500rpx;
		width: 600rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: white;
	}


	.input {
		width: 315rpx;
		font-size: 25rpx;
		border: 1rpx solid #CCCCCC;
		border-radius: 8rpx;
		padding: 5rpx 15rpx;
		margin: 10rpx 5rpx;
	}

	.link {
		display: flex;
		font-size: 15rpx;
	}

	.tips:active {
		color: #007aff;

	}

	.login-btn {
		width: 350rpx;
		font-size: 15rpx;
		margin: 5px;
	}

	.login-nav {
		color: #007aff;
	}
</style>